<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JBPM Console</title>
<link href="../css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
</head>
<body onload="drawworkflow()">
<div id="wrapper">
        <jsp:include page="../include/header.jsp" /> 
            <!-- end div#header -->
            <div id="page">
                <div id="content">
                    <div id="welcome">
                        <h2></h2>
                        <!-- Fetch Rows -->
                        <center>                        	
                        <img id="img1" alt="" src="../image/restday.png" style="display:none">
                        <canvas id="canvas" width="650" height="500" style="background:white"></canvas>
						<!-- request.getAttribute("responseText")-->
                        </center>
                    </div>
                    <!-- end div#welcome -->
                </div>
                <!-- end div#content -->
                <div id="sidebar" style="color:white">
                    <!--ul-->
                    	<jsp:include page="../include/usernav.jsp"/>
                        <!-- end navigation -->
                        <jsp:include page="../include/updates.jsp"/>
                        	审批人： <select name="to" id="to" <% if  (request.getAttribute("node")!=null) { out.print(" disabled ");}%>>
                        	<option value="组长" <% if (request.getAttribute("node")!=null && ((String)request.getAttribute("node")).equals("[组长]")) { out.println("selected='selected'");} %>>组长</option>
                        	<option value="科长" <% if (request.getAttribute("node")!=null &&((String)request.getAttribute("node")).equals("[科长]")) { out.println("selected='selected'");} %>>科长</option>
                        	<option value="部长"  <% if (request.getAttribute("node")!=null &&((String)request.getAttribute("node")).equals("[部长]")) { out.println("selected='selected'");} %>>部长</option>
						</select>
                    <!--/ul-->
                </div>
                <!-- end div#sidebar -->
                <div style="clear: both; height: 1px"></div>
            </div>
            <jsp:include page="../include/footer.jsp" />
        </div>
        <!-- end div#wrapper -->
<script type="text/javascript">
function drawworkflow(){
	if ("<%=request.getAttribute("node")%>"=="[结束]"){ 
		drawCompleteTask();
	}else{
		drawTask();
	}
}

function drawTask(){
	var startx = 233+48/2;
	var starty = 138+48/2;
	var endx;
	var endy;
	var rectx;
	var recty;
	if ("<%=request.getAttribute("node")%>"=="[部长]"){
		endx = 344 + 92/2 + 30;
		endy = 236 + 52/2;
		rectx = 344;
		recty = 236;
	} else if ("<%=request.getAttribute("node")%>"=="[科长]"){
		endx = 224 + 92/2 + 30;
		endy = 233 + 52/2;
		rectx = 224;
		recty = 233;
	} else if ("<%=request.getAttribute("node")%>"=="[组长]"){
		endx = 101 + 92/2 + 30;
		endy = 234 + 52/2;
		rectx = 101;
		recty = 234;
	} else {
		endx = 1000;
		endy = 1000;
		rectx = 0;
		recty = 0;
	}
	animi(startx,starty,endx,endy,rectx,recty,true);
}

function drawCompleteTask(){
	var rectx;
	var recty;
	var endx = 241+48/2;
	var endy = 357+48/2;
	var startx;
	var starty;
	if ("<%=request.getAttribute("fromnode")%>"=="[部长]"){
		startx = 344 + 92/2 + 30;
		starty = 236 + 52/2;
		rectx = 344;
		recty = 236;
	} else if ("<%=request.getAttribute("fromnode")%>"=="[科长]"){
		startx = 224 + 92/2 + 30;
		starty = 233 + 52/2;
		rectx = 224;
		recty = 233;
	} else if ("<%=request.getAttribute("fromnode")%>"=="[组长]"){
		startx = 101 + 92/2 + 30;
		starty = 234 + 52/2;
		rectx = 101;
		recty = 234;
	} else {
		startx = 1000;
		starty = 1000;
		rectx = 0;
		recty = 0;
	}
	animi(startx,starty,endx,endy,rectx,recty,false);
}
	
function drawcircle(x,y){
	var ctx= document.getElementById("canvas").getContext("2d");
	ctx.fillStyle="#FF0000";
	//ctx.strokeStyle="blue";
	ctx.beginPath();
	ctx.arc(x,y,10,0,Math.PI*2,true);
	ctx.closePath();
	ctx.fill();
	//ctx.stroke();
}

function createInstance(){
	window.location.href = "../controller/createInstanceController?to=" + $("#to").val();
}

function completeTask(){
	window.location.href = "../controller/completeTaskController?to=" + $("#to").val();
}

//开始
function animi(startx,starty,endx,endy,rectx, recty,showRect)
{
	var stepx = (endx-startx)/100;
	var stepy = (endy-starty)/100;
	var frameindex = 0;
 	//获取canvas上下文
	  var ctx = $("#canvas").get(0).getContext("2d");
	  setInterval(function(){ 
	     //先清空画布
	     if (endx==1000||startx==1000) {
	    	 ctx.drawImage(document.getElementById("img1"),0,0);
	    	 return;
	     }
		 ctx.clearRect(0,0,650,500);
		 ctx.drawImage(document.getElementById("img1"),0,0);
	     drawcircle(startx+frameindex*stepx,starty+frameindex*stepy);		     
	     if (frameindex==100) {
	    	 if (showRect){
		    	 var myrect = new Rect(rectx+7,recty+6,92-15,52-15);
		    	 roundRectanglePath(ctx,myrect,12);
	    	 }
	    	 return;
	     }
	     frameindex++;
	  },50);
}

function roundRectanglePath(context,rect,radius)
{
	context.strokeStyle="red";
	context.lineWidth=3;
	
    context.beginPath();
    context.moveTo( rect.getX()+radius,rect.getY() );
    context.lineTo( rect.getRight()-radius,rect.getY() );
    context.arc( rect.getRight()-radius,rect.getY()+radius, radius, 3*Math.PI/2,2*Math.PI, false);
    context.lineTo( rect.getRight(),rect.getBottom()-radius);
    context.arc( rect.getRight()-radius,rect.getBottom()-radius, radius, 0, Math.PI/2, false);
    context.lineTo( rect.getX()+radius,rect.getBottom() );
    context.arc( rect.getX()+radius,rect.getBottom()-radius, radius, Math.PI/2, Math.PI, false);
    context.lineTo( rect.getX(),rect.getY()+radius);
    context.arc( rect.getX()+radius,rect.getY()+radius, radius,Math.PI, 3*Math.PI/2, false);
    context.closePath();
    context.stroke();
}

function Rect(x,y,width,height)
{
    this.x = x;
    this.y = y;
    this.width = width;
    this.height= height;
}

Rect.prototype.getX = function()
{
    return this.x;
};

Rect.prototype.getY = function()
{
    return this.y;
};

Rect.prototype.getWidth = function()
{
    return this.width;
};

Rect.prototype.getHeight = function()
{
    return this.height;
};

Rect.prototype.getLeft = function()
{
    return this.x;
};

Rect.prototype.getTop = function()
{
    return this.y;
};

Rect.prototype.getRight = function()
{
    return (this.x + this.width);
};

Rect.prototype.getBottom = function()
{
    return (this.y + this.height);
};
</script>
</body>
</html>
